<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <video id="video">
        <source src="douyin.mp4" type="">
    </video>
    <br>
    <input type="button" value="播放" />
    <input type="button" value="00:00:00" />
    <input type="button" value="00:00:00" />
    <input type="button" value="静音" />
    <input type="button" value="全屏" />
    <script>
        window.onload = function() {
            var oV = document.getElementById('video');
            var aInput = document.getElementsByTagName('input');
            
            var timer = null;
            
            aInput[0].onclick = function(){
                
                if( oV.paused ){
                    
                    oV.play();
                    
                    this.value = '暂停';
                    
                    nowTime();
                    timer = setInterval(nowTime,1000);
                    
                }
                else{
                    
                    oV.pause();
                    
                    this.value = '播放';
                    
                    clearInterval(timer);
                    
                }
                
            };
            
            aInput[2].value = changeTime(oV.duration);
            
            aInput[3].onclick = function(){
                
                
                if( oV.muted ){
                    
                    oV.volume = 1;
                    
                    this.value = '静音';
                    
                    oV.muted = false;
                    
                }
                else{
                    
                    oV.volume = 0;
                    
                    this.value = '取消静音';
                    
                    oV.muted = true;
                    
                }
                
            };
            
            aInput[4].onclick = function(){
                oV.mozRequestFullScreen();
            };
            
            function nowTime(){
                
                aInput[1].value = changeTime(oV.currentTime);
                
            }
            
            function changeTime(iNum){
                
                iNum = parseInt( iNum );
                
                var iH = toZero(Math.floor(iNum/3600));
                var iM = toZero(Math.floor(iNum%3600/60));
                var iS = toZero(Math.floor(iNum%60));
                
                return iH + ':' +iM + ':' + iS;
                
            }
            
            function toZero(num){
                if(num<=9){
                    return '0' + num;
                }
                else{
                    return '' + num;
                }
            }
        
        };
    </script>
</body>
</html>